<template>
  <div class="app-container">
    <div class="conn-api-left" :style="{ 'height': leftHeight }">
      <nav>全部应用</nav>
      <div class="content">
        <el-input placeholder="请输入名称搜索" v-model="appNameLike" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" :autofocus="true" @click="getAllList()"></el-button>
        </el-input>
        <div class="conetnt-box">
          <el-button :class="{ 'conetnt-btn': true, 'a': btnVal == index }" v-for="(item, index) in applicationList"
            :key="index" @click="getAppList(index)">{{ item.appName }}</el-button>
        </div>
      </div>
    </div>
    <div class="conn-api-right" ref="rightRef">
      <div>
        <div style="margin-bottom:20px;">能力签约管理</div>
        <el-row style="width: 100%;" :gutter="20" class="nav-box">
          <el-col :span="22">
            <el-input v-model="queryParams.text" placeholder="请输入能力名称或者能力编码"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" style="width: 90px;height: 50px;" @click="getList()">查询</el-button>
          </el-col>
        </el-row>
        <el-menu :default-active="queryParams.signStatus" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0">已签约</el-menu-item>
          <el-menu-item index="8">审批中</el-menu-item>
          <el-menu-item index="7">已驳回</el-menu-item>
          <el-menu-item index="1">待签约</el-menu-item>
          <el-menu-item index="9">已解约</el-menu-item>
          <el-menu-item index="">全部</el-menu-item>
        </el-menu>
      </div>
      <div class="content-box">
        <el-row class="list-box" v-for="(item, index) in listData" :key="index">
          <el-col :span="2">
            <div class="center-box">
              <el-image :src="require('@/assets/image/u127.svg')" fit="fit" class="list-icon">
              </el-image>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="list-box-center">
              <div class="list-content">
                <div>能力名称：{{ item.serviceName }}</div>
                <div>能力类型：{{ item.serviceType }}</div>
                <div>服务地址：{{ item.mockUrl }}</div>
                <div>接口描述：{{ item.serviceDesc }}</div>
              </div>
              <div class="list-content">
                <div>能力编码：{{ item.serviceCode }}</div>
                <div>所属分类：{{ item.cateName }}</div>
                <div class="list">占位</div>
                <div class="list">占位</div>
              </div>
            </div>
          </el-col>
          <el-col :span="2" style="display: flex;flex-direction: column;justify-content: center; height: 100%;">
            <tex-contro-button :title="'是否确认停用记录' + item.serviceName + '?'" @click="operation(item, 'disable')" text="停用"
              type="danger" v-if="item.signStatus == 0" />

            <el-button v-if="item.signStatus == 7 || item.signStatus == 1 || item.signStatus == 9" size="small"
              style="width: 70px;" type="primary" @click="signingClick(item, 'signing')">签约</el-button>
            <tex-contro-button :title="'是否确认启用记录' + item.serviceName + '?'" @click="operation(item, 'enable')" text="启用"
              type="success" v-if="item.signStatus == 2" />

            <tex-contro-button :title="'是否确认解约记录' + item.serviceName + '?'" @click="operation(item, 'revoke')" text="解约"
              type="primary" v-if="item.signStatus == 2" style="margin-top: 10px;" />

            <el-button size="small" style="width: 70px;margin:10px 0 0;" plain @click=detailsOpen(item)>详情</el-button>
          </el-col>
          <div class="absolute-box">
            <div
              :style="{ 'border-top': item.border, 'border-left': item.border, 'border-right': '30px solid transparent', 'border-bottom': '30px solid transparent' }">
            </div>
            <div
              style="width: 80%;position: absolute;z-index: 10;color: #fff; top: 0;text-align: center;line-height: 30px;font-size: 12px;">
              {{ item.signStatusName }}
            </div>
          </div>
        </el-row>
        <pagination v-show="total > 0" :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>
    <capability-details @cancel="cancel('detailsForm')" v-if="detailsForm.open" :form="detailsForm"
      @tabClick="tabClick($event)" />
    <!-- 签约对话框 -->
    <el-dialog v-el-drag-dialog :title="signingForm.title" :close-on-click-modal="false" v-model:visible="signingForm.open"
      width="1200px" append-to-body>
      <el-form ref="form" :model="signingForm.data" label-width="80px" :rules="signingForm.rules">
        <el-col :span="12">
          <el-form-item label="能力名称">
            {{ signingForm.data.serviceName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="能力编码">
            {{ signingForm.data.serviceCode }}
          </el-form-item>
        </el-col>
        <el-form-item label="服务版本">
          {{ signingForm.data.serviceMasterVersion }}
        </el-form-item>
        <el-form-item label="签约版本" prop="serviceVersion">
          <el-select style="width: 50%;" v-model="signingForm.data.serviceVersion" placeholder="请选择签约版本">
            <el-option v-for="(item, index) in searchList" :key="index" :label="item.serviceVersion"
              :value="item.serviceVerId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约应用" prop="appId">
          <el-select style="width: 80%;" v-model="signingForm.data.appId" placeholder="请选择签约应用">
            <el-option v-for="(item, index) in signingList" :key="index" :label="item.appName"
              :value="item.appId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约说明" prop="orderExplain">
          <el-input style="width: 80%;" type="textarea" v-model="signingForm.data.orderExplain"></el-input>
        </el-form-item>
        <el-form-item label="生效时间" prop="serviceStartTime">
          <el-date-picker value-format="yyyy-MM-dd" v-model="signingForm.data.serviceStartTime" type="date"
            placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="失效时间" prop="serviceEndTime">
          <el-date-picker value-format="yyyy-MM-dd" :disabled="signingForm.data.longTime"
            v-model="signingForm.data.serviceEndTime" type="date" placeholder="选择日期" />
          <el-checkbox style="margin-left: 10px;" v-model="signingForm.data.longTime">永不失效</el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSigningForm('signSubmit')">提交审批</el-button>
        <el-button type="primary" @click="submitSigningForm('signSave')">暂存</el-button>
        <el-button @click="cancel('signingForm')">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { listAllApp } from "@slc/api/slc/system";
import { debounceWrapper } from "@/utils/zmids";
import * as api from "@slc/api/slc/manage";
import CapabilityDetails from "@slc/views/slc/inventory/components/CapabilityDetails/index.vue"
export default {
  name: 'ConnCapabilityManage',
  components: { CapabilityDetails },
  data () {
    return {
      // 左侧盒子的高度
      leftHeight: 'auto',
      checked: true,
      // 列表数据总数
      total: 0,
      //左侧应用列表查询参数
      appNameLike: '',
      btnVal: 0,
      // 左侧应用栏列表
      applicationList: [],
      signingList: [],
      serviceName: '',
      listData: [],
      searchList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        // 查询条件
        text: '',
        // 状态
        signStatus: '',
      },
      signingForm: {
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: '',
        // 表单参数
        data: {},
        // 规则
        rules: {
          // 签约版本
          serviceVersion: [
            { required: true, message: '请选择签约版本', trigger: 'blur' }
          ],
          // 签约应用
          appId: [
            { required: true, message: '请选择签约应用', trigger: 'blur' }
          ],
          // 签约说明
          orderExplain: [
            { required: true, message: '签约说明不可为空', trigger: 'blur' }
          ],
          // 生效时间
          serviceStartTime: [
            { required: true, message: '请选择生效时间', trigger: 'blur' }
          ],
          // 结束时间
          serviceEndTime: [
            { required: true, message: '请选择过期时间', trigger: 'blur' }
          ],
        },
      },
      // 详情
      detailsForm: {
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: '',
        apiId: '',
        apiVerId: '',
        // 遮罩层
        loading: false,
        // 基本信息
        information: {},
        // 输入参数
        input: [],
        // 输出参数
        output: [],
      }
    }
  },
  created () {
    this.getList()
    this.getAllList()
  },
  methods: {
    handleSelect (key) {
      this.queryParams.signStatus = key
      this.getList()
    },
    // 左侧应用列表调用
    getAppList (val) {
      this.btnVal = val
      this.queryParams.pageNum = 1;
      if (this.btnVal == 0) {
        this.appNameLike = ''
        this.queryParams.appId = ''
        this.getList();
        this.getAllList();
      } else {
        this.queryParams.appId = this.applicationList[this.btnVal].appId
        this.getList();
      }
    },
    // 获取签约版本
    getSearch: debounceWrapper(function (id) {
      api.search(id).then(
        response => {
          this.searchList = response.data.list
        })
    }),
    // 查询列表
    getList: debounceWrapper(function () {
      api.searchService(this.queryParams).then(
        response => {
          this.listData = response.data.list
          this.total = response.data.total
          this.$nextTick(() => {      //获取右侧动态盒子高度，赋值给左侧
            let height = this.$refs.rightRef.offsetHeight;
            this.leftHeight = height;
          })
          this.listData.forEach(element => {
            switch (element.signStatus * 1) {
              case 0:
                this.$set(element, 'border', '30px solid #16ba77')
                this.$set(element, 'signStatusName', '生效')
                break;
              case 1:
                this.$set(element, 'border', '30px solid #7f7f7f')
                this.$set(element, 'signStatusName', '待签约')
                break;
              case 2:
                this.$set(element, 'border', '30px solid #f56c6c')
                this.$set(element, 'signStatusName', '停用')
                break;
              case 7:
                this.$set(element, 'border', '30px solid #fa919e')
                this.$set(element, 'signStatusName', '已驳回')
                break;
              case 8:
                this.$set(element, 'border', '30px solid #facd91')
                this.$set(element, 'signStatusName', '审批中')
                break;
              default:
                this.$set(element, 'border', '30px solid #7f7f7f')
                this.$set(element, 'signStatusName', '已解约')
                break;
            }
          });
        })
    }),
    // 详情页弹窗切换tabar
    tabClick: debounceWrapper(function (index) {
      this.detailsForm.loading = true;
      switch (index) {
        case '2':
          // 查询输入参数列表
          api.searchTree({ 'serviceId': this.detailsForm.serviceId, 'serviceVersion': this.detailsForm.serviceVersion }).then(
            response => {
              this.detailsForm.input = response.data;
              this.detailsForm.loading = false;
            }
          );
          break;
        default:
          // 查询输出参数列表
          api.outSearchTree({ 'serviceId': this.detailsForm.serviceId, 'serviceVersion': this.detailsForm.serviceVersion }).then(
            response => {
              this.detailsForm.output = response.data;
              this.detailsForm.loading = false;
            }
          );
          break;
      }


    }),
    // 查询应用列表
    getAllList: debounceWrapper(function () {
      this.allLoading = true;
      listAllApp(this.appNameLike).then(
        response => {
          this.applicationList = [{ appName: '所有应用', appId: '' }]
          this.applicationList = this.applicationList.concat(response.data)
          this.signingList = response.data
          this.allLoading = false;
        }
      );
    }),
    // 表单重置
    reset () {
      this.signingForm.data = {
        // API主键
        apiId: '',
        // API编码
        apiCode: '',
        // API服务名
        apiName: '',
        // 所属应用
        appId: '',
        // 接口类型
        apiType: '',
        // 请求路径
        apiUrl: '',
        // 响应时间
        alarmSecs: '',
        // 失败重试次数
        retryTimes: '',
        // 请求方式
        httpRequestMethod: '',
      };
      // 重置字段校验
      this.$refs.formRef && this.$refs.formRef.clearValidate();
      this.resetForm("formRef");
    },
    // 打开签约弹窗
    signingClick (item) {
      this.reset()
      this.signingForm.open = true
      this.signingForm.title = '签约接口'
      this.signingForm.data = {
        //所属应用Id
        apiId: '',
        //签约应用
        appId: '',
        // 签约Id
        signId: item.signId,
        // 服务Id
        serviceId: item.serviceId,
        // 能力名称
        serviceName: item.serviceName,
        // 能力别名
        servicePath: item.servicePath,
        // 能力编码
        serviceCode: item.serviceCode,
        // 服务版本
        serviceMasterVersion: item.serviceMasterVersion,
        // 永不过期
        longTime: false,
        // 签约版本
        serviceVersion: item.serviceVersion,
        // 签约说明
        orderExplain: item.orderExplain,
        // 生效时间
        serviceStartTime: '',
        // 过期时间
        serviceEndTime: '',
      }
      this.getSearch()
    },
    // 查询详情列表
    detailsOpen: debounceWrapper(function (item) {
      this.detailsForm.serviceId = item.serviceId
      this.detailsForm.serviceVersion = item.serviceVersion
      api.selectDetailById(item.signId).then(
        response => {
          this.detailsForm.open = true
          this.detailsForm.information = response.data
          this.detailsForm.title = '能力接口详情'
        }
      );
    }),
    // 权限操作
    operation: debounceWrapper(function (item, apiName) {
      let promise = api[apiName](item.signId)
      promise.then(
        response => {
          this.getList()
        }
      );
    }),
    // 签约对话框提交
    submitSigningForm: debounceWrapper(function (apiName) {
      let promise = api[apiName](this.signingForm.data)
      promise.then(
        response => {
          this.getList()
          this.signingForm.open = false
        }
      );
    }),

    cancel (val) {
      this[val].open = false
    }
  }
}
</script>

<style lang="scss" scoped>
$border: 1px solid rgba(220, 223, 230, 1);

.app-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow-y: auto;

  .conn-api-left {
    width: 20%;
    margin-right: 10px;
    overflow-y: auto;

    nav {
      width: 100%;
      height: 60px;
      background-color: rgb(235, 237, 240);
      line-height: 60px;
      color: #000;
      font-size: 18px;
      padding-left: 10px;
    }

    .content {
      width: 100%;
      height: calc(100% - 60px);
      border: $border;
      padding: 10px;

      .conetnt-box {
        width: 100%;
        height: 95%;
        margin-top: 10px;
        overflow: hidden;
        overflow-y: auto;
      }

      .conetnt-btn {
        width: 100%;
        height: 50px;
        border: none;
        text-align: left;
        margin-left: 0;
        color: #000;
      }

      .conetnt-btn:hover {
        background-color: rgb(242, 242, 242) !important
      }

      .a {
        color: #000;
        background-color: rgb(242, 242, 242)
      }
    }
  }

  .conn-api-right {
    width: calc(80% - 10px);
    border: $border;
    padding: 10px;
    min-height: 87vh;

    .nav-box {
      ::v-deep .el-input__inner {
        width: 100%;
        height: 50px;
      }
    }

    .content-box {
      width: 100%;
      position: relative;

      .absolute-box {
        width: 60px;
        position: absolute;
        top: 0;
        left: 0;
      }

      .center-box {
        width: 100%;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-box {
        margin-top: 10px;
        width: 100%;
        height: 130px;
        background-color: #f6f8ff;
        border: 1px solid #e2e4ea;
      }

      .list-icon {
        width: 50px;
      }

      .list-box-center {
        width: 90%;
        height: 130px;
        display: flex;
        justify-content: space-between;
        padding: 20px;

        .list-content {
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .list {
          content: '';
          opacity: 0;
        }
      }

    }
  }

}
</style>
